<template>
  <div class="carta">
    <img :src="img11" @click="alerta(stuid)">
      <div class="addtocart" v-if="show">
        <div class="one" >
          <div class="a">
            <img :src="dat.picsUrl.split(',')[0]" class="img">
            <div class="cen">
              <span>{{dat.goodsName}}</span>
              <span class="color">
                ￥{{dat.orderPrice}}.00
                <span>1提起批</span>
              </span>
            </div>
             <img :src="img13" class="x" @click="cuo"> 
          </div>
           <div class="b">
            <span>库存36盒</span>
            <span>月销46盒</span>
            <span>一提=12盒</span>
          </div>
           <div class="c">
            <span class="c1">数量</span>
            <span class="c2">提</span>
            <span class="c3">盒</span>
            <span class="c4">-</span>
            <span class="c5">12</span>
            <span class="c6">+</span>
          </div>
        </div>
        <div class="two">
          <span class="zong">
            合计:<span>￥60</span>
          </span>
          <button>加入购物车</button>
        </div>
      </div> 
  </div>
</template>

<script>
import { shouye, fenlei, pinpai ,alert} from "../api/api.js";
export default {
  props: ["stuid"],
  data() {
    return {
      img11: require("../assets/img/ic_shop.png"),
      img13:require("../assets/img/ic_present_colse.png"),
      show:false,
      dat:""
    };
  },
  methods: {
    alerta(a) {
      this.findalert(a);
    },
    cuo() {
      this.show = false;
    },
    findalert(a) {
     if(this.$store.state.token){
         return alert(
        a,
        this.$store.state.myresule.stationId,
        this.$store.state.userId,
        this.$store.state.storeId,
        this.$store.state.myresule.merchantId,
        this.$store.state.storeCustId
      ).then(res => {
        if (res.data.status.statusCode== 0){
             this.show = true;
            console.log("驾车", res);
            this.dat=res.data.result.goodsOl;
        } 
         
      });
     }else{
        this.show = false; 
     }
    }
  }
};
</script>

<style scoped lang="scss">
.carta {
  img {
    width: 0.16rem;
    height: 0.16rem;
  }
   .addtocart{
    box-sizing: border-box;
    width:100%;
    height:4rem;
    // border:0.01rem solid red;
    position: fixed;
    top:2.2rem;
    left:0;
    background-color: white;
    z-index:99;
    .one{
      width:100%;
      height:3.4rem;
      // border:0.01rem solid red;
      display: flex;
       flex-direction: column;
      .a{
        width:100%;
        height:1.4rem;
        // border:0.01rem solid red;
        display: flex;
        justify-content: space-between;
        margin:0.1rem 0 0 0.1rem;
        .img{
          width:1.2rem;
          height:1.4rem;
          // border:0.01rem solid red; 
        }
        .cen{
          width:2.1rem;
          height:1.4rem;
          margin-left:0.1rem;
          font-size:0.16rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
         span{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
         }
          .color{
            font-size:0.2rem; 
            color: #dd3333;
            span{
              font-size: 12px;
              color: #333333;
            }
          }
        }
        .x{
          width:0.13rem;
          height:0.13rem;
          margin-right:0.2rem;
          margin-top: 0.05rem;
        }
      }
      .b{
        width:70%;
        height:0.4rem;
        // border:0.01rem solid red;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span{
          font-size:0.14rem;
          color:#999999;
        }
      }
      .c{
        width:100%;
        height:0.5rem;
        // border:0.01rem solid red;
        position: relative;
        .c1{
          position:absolute;
          top:0.25rem;
          left:0.15rem;
          font-size:0.14rem;
          color:#999999;
        }
        .c2{
          display: inline-block;
          width:0.25rem;
          height:0.20rem;
          border: 0.01rem solid #999999;
          text-align: center;
          line-height:0.20rem;
          position:absolute;
          top:0.2rem;
          left:2rem;
          font-size:0.14rem;
        }
        .c3{
          display: inline-block;
          width:0.25rem;
          height:0.20rem;
          text-align: center;
          line-height:0.20rem;
          position:absolute;
          top:0.22rem;
          left:2.35rem;
          font-size:0.14rem;
          color:white;
          background:red;
        }
        .c4{
          display: inline-block;
          width:0.25rem;
          height:0.20rem;
           border: 0.01rem solid #999999;
          text-align: center;
          line-height:0.20rem;
          position:absolute;
          top:0.2rem;
          left:2.74rem;
          font-size:0.14rem;
          background-color:gainsboro;
        }
        .c5{
          display: inline-block;
          width:0.45rem;
          height:0.20rem;
           border: 0.01rem solid #999999;
          text-align: center;
          line-height:0.20rem;
          position:absolute;
          top:0.2rem;
          left:3rem;
          font-size:0.14rem;
        }
        .c6{
          display: inline-block;
          width:0.25rem;
          height:0.20rem;
           border: 0.01rem solid #999999;
          text-align: center;
          line-height:0.20rem;
          position:absolute;
          top:0.2rem;
          left:3.45rem;
          font-size:0.14rem;
          background-color:gainsboro;
        }
      }
    }
    .two{
      width:100%;
      height:0.55rem;
      border:0.01rem solid #cccccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .zong{
        font-size:0.16rem;
        margin-left:1.16rem;
        span{
          color: #dd3333;
        }
      }
      button{
        width:40%;
        height:0.55rem;
        border: 0.01rem solid red;
        background-color: #dd3333;
        color: white;
      }
    }
   }
}
</style>
